<template>
	<view class="home">
        <view class="uni-padding-wrap">
            <view class="page-section swiper">
                <view class="page-section-spacing">
                    <swiper class="swiper" :indicator-dots="indicatorDots" :indicator-color="indicatorColor" :indicator-active-color="indicatorActiveColor" :autoplay="autoplay" :interval="interval" :duration="duration" :circular="circular">
                        <swiper-item>
                            <view class="swiper-item uni-bg-red">
								<image width="100%" src="../../static/images/timg.jpg"></image>
							</view>
                        </swiper-item>
                        <swiper-item>
                            <view class="swiper-item uni-bg-green">
								<image width="100%" src="../../static/images/timg2.jpg"></image>
							</view>
                        </swiper-item>
                        <swiper-item>
                            <view class="swiper-item uni-bg-blue">
								<image width="100%" src="../../static/images/timg3.jpg"></image>
							</view>
                        </swiper-item>
                    </swiper>
                </view>
            </view>
			<view class="tip-wrap">
				<uni-notice-bar 
					show-icon="true" 
					scrollable="false" 
					single="true" 
					background-color="transparent"
					text="[单行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏">
				</uni-notice-bar>
				<text class="more">更多</text>
			</view>
			<view class="page-section swiper">
			    <view class="page-section-spacing">
			        <swiper class="swiper swiper2" :indicator-dots="indicatorDots" :indicator-color="indicatorColor" :indicator-active-color="indicatorActiveColor" :autoplay="autoplay" :interval="interval" :duration="duration" :circular="circular">
			            <swiper-item>
			                <view class="swiper-item uni-bg-red">
								<dl>
									<dt>751,595,905.411</dt>
									<dd>Total locking（CATT）</dd>
								</dl>
								<dl>
									<dt>751,595,905.411</dt>
									<dd>Total locking（CATT）</dd>
								</dl>
							</view>
			            </swiper-item>
			            <swiper-item>
			                <view class="swiper-item uni-bg-green">
								<dl>
									<dt>751,595,905.411</dt>
									<dd>Total locking（CATT）</dd>
								</dl>
								<dl>
									<dt>751,595,905.411</dt>
									<dd>Total locking（CATT）</dd>
								</dl>
							</view>
			            </swiper-item>
			            <swiper-item>
			                <view class="swiper-item uni-bg-blue">
								<dl>
									<dt>751,595,905.411</dt>
									<dd>Total locking（CATT）</dd>
								</dl>
								<dl>
									<dt>751,595,905.411</dt>
									<dd>Total locking（CATT）</dd>
								</dl>
							</view>
			            </swiper-item>
			        </swiper>
			    </view>
			</view>
			<view class="table-wrap">
				<wuc-tab class="tab" :tab-list="tabList" :tabCur.sync="TabCur" :textFlex="true" tab-class="text-center text-white bg-black" select-class="text-blue" @change="tabChange"></wuc-tab>
				<t-table @change="change">
					<t-tr>
						<t-th>
							<text>Pair</text>
							<view class="arrow-wrap">
								<image src="../../static/images/up.png"></image>
								<image src="../../static/images/down.png"></image>
							</view>
						</t-th>
						<t-th>
							<text>Price</text>
							<view class="arrow-wrap">
								<image src="../../static/images/up.png"></image>
								<image src="../../static/images/down.png"></image>
							</view>
						</t-th>
						<t-th>
							<text>24h Change</text>
							<view class="arrow-wrap">
								<image src="../../static/images/up.png"></image>
								<image src="../../static/images/down.png"></image>
							</view>
						</t-th>
					</t-tr>
					<t-tr v-if="tableList0.length>0" v-for="item in tableList0" :key="item.id">
						<!-- <t-td>{{ item.id + 1 }}</t-td>
						<t-td>{{ item.name }}</t-td>
						<t-td>{{ item.age }}</t-td> -->
						<t-td class="fir btn_trading">
							<p><span>{{item.coinCode}}</span> / {{item.baseCoinCode}}</p>
							<strong>Volume {{item.dailyVolumeBase}}</strong>
						</t-td>
						<t-td class="sec">
							<p><span class="seccolor">{{item.price}}</span></p>
							<strong>$ {{item.priceUSD}}</strong>
						</t-td>
						<t-td class="thr">
							<a class="btn" :class="{'secbg':item.dailyChange<0}">
							{{item.dailyChange>=0?`+${item.dailyChange}`:item.dailyChange}}%</a>
						</t-td>
					</t-tr>
				</t-table>
			</view>
        </view>
    </view>
</template>

<script>
	import uniNoticeBar from "@/components/uni-notice-bar/uni-notice-bar.vue"
	import uniSegmentedControl from "@/components/uni-segmented-control/uni-segmented-control.vue"
	import tTable from '@/components/t-table/t-table.vue';
    import tTh from '@/components/t-table/t-th.vue';
    import tTr from '@/components/t-table/t-tr.vue';
    import tTd from '@/components/t-table/t-td.vue';
	import WucTab from '@/components/wuc-tab/wuc-tab.vue';
	export default {
		components: {
			uniNoticeBar,
			uniSegmentedControl,
			tTable,
            tTh,
            tTr,
            tTd,
			WucTab
		},
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				indicatorColor:"#596880",
				"indicatorActiveColor":"#51acfd",
				circular: true,
				current: 0,
				tableList0: [
                ],
				tableList1: [
				],
				tableList2: [
				],
				tableList3: [
				],
				TabCur: 0,
				tabList: [{ name: 'BTC' }, { name: 'ETH' },{ name: 'USDT' }, { name: 'TRX' }],
				timer:null
			}
		},
		methods: {
			onClickItem(index) {
				if (this.current !== index) {
					this.current = index;
				}
			},
			change(e) {
                console.log(e.detail);
            },
            edit(item) {
                uni.showToast({
                    title: item.name,
                    icon: 'none'
                });
            },
			tabChange(index) {
				console.log(index)
				this.TabCur = index;
			},
			setTimer(){
				if(this.timer){
					clearInterval(this.timer)
				}
				this.timer=setInterval(()=>{
					this.getList()
				},5000)
			},
			getList(){
				let urlList=[
					"http://app.catex.io/quote/BTC/list.json",
					"http://app.catex.io/quote/ETH/list.json",
					"http://app.catex.io/quote/USDT/list.json",
					"http://app.catex.io/quote/TRX/list.json"
				]
				// return Promise.all(
					urlList.map((item,index)=>{
						uni.request({
							url:item,
							method:"GET",
							data:{},
							success:(res)=> {
								if(res.data.code===0){
									this['tableList'+index]=res.data.data
								}else{
									this['tableList'+index]=[]
								}
							},
							fail:()=>{
								
							},
							complete:()=>{
								
							}
						})
					})
				// )
			}
		},
		onLoad() {
			this.getList()
			this.setTimer()
		},
		onPullDownRefresh() {
			console.log('refresh');
			this.getList()
			uni.stopPullDownRefresh();
		}
	}
</script>

<style lang="scss">
	page{
		background: #0f131a;
	}
	.swiper .page-section-spacing image{
		width:100%;
	}
	.swiper2{
		background:#192333;
		margin-bottom:20upx;
		.swiper-item{
			display: flex;
			justify-content: center;
			align-items: center;
			color:#fff;
			width:100%;
			height:100%;
			font-size:24upx;
			dl{
				text-align:center;
				padding:0 20upx;
				box-sizing: border-box;
				dt{
					font-size: 40upx;
				}
				dd{
					color: #8f8f94;
				}
			}
		}
	}
	.tip-wrap {
		position:relative;
		width:100%;
		height:auto;
		padding-right:100upx;
		box-sizing:border-box;
		background: #0f131a;
		margin-top: 15upx;
		.more{
			position:absolute;
			right:20upx;
			top:0;
			font-size:24upx;
			top:12upx;
			color:#1d7cc2;
			border:1upx solid #1d7cc2;
			padding:0 10upx;
		}
	}
	.table-wrap{
		.tab{
			font-size:24upx;
			background:#192333;
		}
		.t-table {
			font-size:24upx;
			border:none;
			.t-tr{
				&:nth-child(2n) {
					background: transparent;
				}
				.t-td{
					width:calc(100% / 3);
					border:none;
					&.fir {
						flex-direction:column;
						text-align:left;
						p{
							color: #8f8f94;
							width:100%;
							span{
								color: #ffffff;
							}
						}
						strong{
							flex-direction:row;
							width:100%;
							font-size: 20upx;
						}
					}
					&.sec {
						flex-direction:column;
						text-align:left;
						p{
							color: #8f8f94;
							width:100%;
							span{
								 color: #32a66c;
							}
						}
						strong{
							flex-direction:row;
							width:100%;
							font-size: 20upx;
						}
					}
					&.thr {
						justify-content: flex-end !important;
						a {
							display:inline-block;
							padding: 15upx 24upx;
							background-color: #32a66c;
							font-size: 32upx;
							color: #ffffff;
							border-radius: 5upx;
							&.secbg {
								background-color: #f56056;
							}
						}
					}
				}
			}
			.t-th{
				font-size:24upx;
				border:none;
				background: #131a26;
				.arrow-wrap{
					display: flex;
					flex-direction:column;
					margin-left:20upx;
				}
				image{
					width:15upx;
					height:15upx;
				}
			}
		}
	}
	
</style>
